import React, { useState } from "react";
import { Area} from '@ant-design/charts';
import {Button, PageHeader, Space} from "antd";
import dateFlightNumModel from "../models/dateFlightNumModel";
import '../App.css';

function Sum(props) {
    const [data, setData] = useState([]);
    React.useEffect(async () => {
        let getFlightDateInfo = async () => {
            var arryModels = [];
            const response = await fetch(
                'http://flightapi.xiexianbo.xin/flight/getFlightDateInfo?pageSize=1000',
                { method:'GET'}
            )
            const data  = await response.json();
            const data1 = await data.data.data;
            data1.forEach((value,index)=>{
                let model = new dateFlightNumModel(value.flightDate,value.flightNum);
                arryModels.push(model);
            });

            arryModels.forEach((value,index)=>{
                console.log(value);
            })
            // console.log(data1);
            // console.log(arryModels);
            setData(arryModels);
        }
        getFlightDateInfo();
    }, []);

    var config1 = {
        padding:[50,200,50, 200],
        autoFit: 'true',
        data: data,
        xField: 'flightDate',
        yField: 'flighNum',
        label: {
            position: 'middle',
            style: {
                fill: 'rgba(246,25,208,0.97)',
                opacity: 0.8,
            },
        },
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
        slider: {
            start: 0.1,
            end: 0.9,
            trendCfg: {
                isArea: true,
            },
        },
        areaStyle: () => {
            return {
                fill: 'l(270) 0:#ffffff 0.5:009EFEFF 1:#1890ff',
            };
        },
        meta: {
            flightDate: { alias: 'flightDate' },
            flighNum: { alias: '航班数量' },
        },
        annotations: [
            {
                type: 'text',
                position: ['min', 'median'],
                content: '中位线',
                offsetY: -4,
                style: {
                    textBaseline: 'bottom',
                },
            },
            {
                type: 'line',
                start: ['min', 'median'],
                end: ['max', 'median'],
                style: {
                    stroke: 'red',
                    lineDash: [2, 2],
                },
            },
        ],
    };

    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => {props.history.goBack()}}
                title="每日航班数"
            />,
            <Area {...config1} ></Area>

        </>
    );
}
export default Sum;
